<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平移和旋转</title>
</head>
<body>
  <canvas id="c" width="640" height="480"></canvas>
  <script  id="vertex-shader-2d" type="notjs">

  // an attribute will receive data from a buffer
  attribute vec2 a_position;
  uniform vec2 u_resolution;
  uniform mat3 matrix_translate;
  uniform mat3 matrix_rotate;
  uniform mat3 matrix_scale;

  // attribute vec4 a_position;
  // all shaders have a main function
  varying vec4 v_color;
  //uniform vec2 u_translation;
  void main() {

    // gl_Position is a special variable a vertex shader
    // is responsible for setting
    // 从像素坐标转换到 0.0 到 1.0
    // vec2 position = a_position + u_translation;
    vec2 position = (matrix_translate * matrix_rotate * matrix_scale * vec3(a_position, 1)).xy;
    vec2 zeroToOne = position - u_resolution / 2.0;

    // 再把 0->1 转换 0->2
    vec2 zeroToTwo = zeroToOne / u_resolution * 2.0;

    // 把 0->2 转换到 -1->+1 (裁剪空间)
    vec2 clipSpace = zeroToTwo * vec2(1.0,-1.0);

    gl_Position = vec4(clipSpace, 0, 1);
    gl_PointSize = 10.0;
    v_color = vec4(clipSpace, 0.5, 1);
  }

</script>
<script  id="fragment-shader-2d" type="notjs">

  // fragment shaders don't have a default precision so we need
  // highp：高精度，适合需要高精度的计算。mediump：中等精度，适合一般的计算。lowp：低精度，适合颜色计算。
  precision mediump float;
  // uniform vec4 u_color;
  varying vec4 v_color;
  void main() {
    // gl_FragColor is a special variable a fragment shader
    // is responsible for setting
    gl_FragColor = v_color; // return redish-purple
  }

</script>

<script type="module">
    import { createProgram, drawPoints} from './js/createShader.js';
    // Get the strings for our GLSL shaders
    var vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
    var fragmentShaderSource = document.querySelector("#fragment-shader-2d").text;
    const {gl,program} = createProgram('#c',vertexShaderSource,fragmentShaderSource);

    var positions = [
        0, 0,
        300, 0, 
        300, 30,

        0, 0, 
        0, 30,
        300,30,

        0,0,
        0,400,
        30,400,

        0,0,
        30,0,
        30,400,

        0,400,
        300,400,
        0,370,

        0,370,
        300,370,
        300,400,

        0,185,
        200,185,
        200,215,

        0,215,
        0,185,
        200,215
    ];
    // var positions = [0, 0, 200, 0, 200, 10];
    drawPoints(gl.TRIANGLES,positions,2,24)

    function drawE(translation){
        var resolutionUniformLocation = gl.getUniformLocation(program, "u_translation");
        gl.uniform2f(resolutionUniformLocation, translation, 0);
        // Set clear color to black, fully opaque
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // Clear the color buffer with specified clear color
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 24);
    }

    function animateTranslate(duration,distance) {
        let start = Date.now();
        function step() {
            console.log('run step;')
            let timePassed = Date.now() - start;
            let progress = timePassed / duration;
            if (progress <= 1) {
                drawE(distance*progress);
                window.requestAnimationFrame(step);
            } else {
                return;
            }
        }
        
        window.requestAnimationFrame(step);
    }

    var m3 = {
           //平移矩阵
           translation: function(tx, ty) {
               return new Float32Array([
                    1, 0, 0,
                    0, 1, 0,
                    tx, ty, 1,
               ]);
           },
            //旋转矩阵
           rotation: function(angleInRadians) {
               var c = Math.cos(angleInRadians);
               var s = Math.sin(angleInRadians);
               return new Float32Array([
                    c,-s, 0,
                    s, c, 0,
                    0, 0, 1,
               ]);
           },
            //缩放矩阵
           scaling: function(sx, sy) {
               return new Float32Array([
                sx, 0, 0,
                0, sy, 0,
                0, 0, 1,
               ]);
           },
       };

    // animateTranslate(3000,150);
    function linearTransformation(){
        var translateUniform = gl.getUniformLocation(program, "matrix_translate");
        gl.uniformMatrix3fv(translateUniform, false, m3.translation(100,200));
        
        var rotateUniformn = gl.getUniformLocation(program, "matrix_rotate");
        gl.uniformMatrix3fv(rotateUniformn, false, m3.rotation(1));

        var scaleUniform = gl.getUniformLocation(program, "matrix_scale");
        gl.uniformMatrix3fv(scaleUniform, false, m3.scaling(0.5,0.5));

        gl.drawArrays(gl.TRIANGLES, 0, 24);
    }

    linearTransformation();

</script>
</body>
</html>